<template>
    <div class="top-img">
        <img class="img1" src="https://img.axureshop.com/ee/00/de/ee00de2201bf478bb4a9d4f881afd706/images/验证码登录/u476.png" alt="">
        <img class="img2" src="https://img.axureshop.com/ee/00/de/ee00de2201bf478bb4a9d4f881afd706/images/验证码登录/u477.png" alt="">
        <div class="login">登录</div>
    </div>
    <div class="form">
        <van-form @submit="onSubmit" ref="userFormRef" :model="userForm">
            <img class="img3" src="https://img.axureshop.com/ee/00/de/ee00de2201bf478bb4a9d4f881afd706/images/全局说明/u315.png" alt="">
            <van-cell-group inset>
                <van-field v-model="userForm.username" name="username" placeholder="请输入手机号"
                    :rules="[{ required: true, message: '请填写用户名', trigger: 'blur' }]" />
                <van-field v-model="userForm.password" type="password" name="password" placeholder="请输入密码"
                    :rules="[{ required: true, message: '请填写密码', trigger: 'blur' }]" />
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    登录
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script setup >
import { valid } from "mockjs";
import { reactive, ref } from "vue"
import { useRouter } from "vue-router";
import { userLoginApi } from "../../api/loginApi"
import adminStore from "@/store/admin"
const myadminStore=adminStore()
const userForm = reactive({
    username: '',
    password: '',
});
const userFormRef = ref()

const router = useRouter()
const onSubmit = async (userForm) => {

    let code = await myadminStore.userLoginAction(userForm)
    if (code === 0) {
        router.replace('/')
        myadminStore.setUserInfo(true)
    } else {
        console.log(1231654);
    }
};

</script>


<style lang='scss' scoped>
.top-img {
    background-image: url("https://img.axureshop.com/ee/00/de/ee00de2201bf478bb4a9d4f881afd706/images/验证码登录/底色_u475.png");
    height: 247px;
}

.login {
    color: white;
    font-size: 28px;
    font-weight: bold;
    font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
    position: relative;
    top: 70px;
    left: 40px;
}

.form {
    position: relative;
    top: -100px;
    width: 345px;
    height: 420px;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 10px rgba(102, 102, 102, 0.149019607843137);
    border-radius: 8px;
}

.img1{
    position: absolute;
    left: -38px;
    top: -109px;
}
.img2{
    position: absolute;
    left: 312px;
    top: -31px;
}
.img3{
    position: absolute;
    left: 308px;
    top: 146px;
    z-index: 23;
}
</style>